<template>
<div class="tixian">
    <div class="top">
        <!-- nav导航 -->
        <div class="top-nav">
            <img src="../assets/img/syy.png" alt="" @click="$router.go(-1)" />
            <span>提现</span>
            <div class="tixian-box">
                <!-- <img src="../assets/img/bz.png" alt="" class="tixian-img" @click="bangzhu" /> -->
            </div>
        </div>
        <!-- 总收益(彩币) -->
        <div class="top-text">
            <span>总收益(彩币)</span>
            <span style="font-size: 1.875rem; margin: 0.25rem 0 0 0.625rem;">{{ this.TxIncome }}</span>
        </div>
        <div class="top-name">
            到账金额 = 提现彩币数量 - (提现彩币数量
            *提现比例)
        </div>

        <div class="main">
            <div class="main-top">
                <div class="mian-top-on">
                    <p>提现至</p>
                    <p class="pp">
                        <span>姓名</span>
                        <input class="inputs" type="text" v-model="geren.RealName" placeholder="请输入你的姓名" :readonly="true" />
                    </p>
                </div>
                <p class="pps">
                    <span>卡号</span>
                    <el-input v-if="xin.length != 0" v-model="xin[0].BankCardNumber " type="text" :readonly="true" placeholder="请输入您的银行卡账号" class="kh">
                        <!-- @blur="kahaoo" -->
                    </el-input>
                </p>
                <p class="pps ssp">
                    <span>开户行</span>
                    <input type="text" v-if="xin.length != 0" v-model="xin[0].BankAddress" :readonly="true" placeholder="请输入您的开户银行" class="khh" />
                    <!-- @blur="khhh" -->
                </p>
            </div>
            <div class="bot">
                <div class="mi">
                    <p>请输入支付密码</p>
                    <div style=" margin-top: 0.3125rem;">
                        <input type="password" v-model="zfmm" placeholder="请输入" @blur="zhifu" v-if=" this.geren.TxPassWord !=null" />
                    </div>
                </div>
                <p class="ma">
                    若忘记支付密码，请前往
                    <router-link to="/personal">个人中心</router-link>
                    进行重新设置
                </p>
            </div>

            <button @click="ssr">申请提现</button>
        </div>
    </div>

    <!-- 模态框 -->
    <!-- <div class="motai" @click="sspp">

<div>

<div class="mainn">

<div><img src="../assets/img/sc.png" alt="" class="mainn-box" /></div>

<p>每天可提现次数:<span v-text="this.txpzb.NumberTimes"></span></p>

<p>

可提现的时间:<span v-text="this.txpzb.StartTime"></span>-<span v-text="this.txpzb.EndTime"></span>

</p>

<p>单次最小提现金额:<span v-text="this.txpzb.MinMoney"></span></p>

<p>

可提现的工作日:<span v-for="item in this.txpzb.WeekDays" :key="item.Value">{{ item.Title }}</span>

</p>

</div>

</div>

</div> -->
    <!-- 模态框 -->
    <div class="motaii" @click="ssapp">
        <div>
            <div>
                <img src="../assets/img/sc.png" alt="" @click="immgg" />
            </div>
            <div class="maiinn"></div>
            <div @click="djqd">确定</div>
        </div>
    </div>
    <div class="tan"></div>
</div>
</template>

<script>
import local from "@/utils/local";

import {
    getUser,
    WithdrawalMessage,
    WorkOrderAddTx
} from "@/api/index.js";
export default {
    data() {
        return {
            TxIncome: "",
            xin: [],
            Bank: {},
            Withdrawal: {},
            tx: "",
            zfmm: "",
            flag: "false",
            geren: {}, //信息
            xinmin: "",
            khh: "",
            kahao: "",
            txpzb: {}, //信息
            zfyz: "false",
            yhkyz: "false",
            zhzb: /^([1-9]{1})(\d{14}|\d{18})$/,
            zzbds: /^[0-9a-zA-Z]{6,12}$/,
            zw: /^[\u4e00-\u9fa5]+$/,
            // keyy: "lizxlylwkdqzymyzsqblt666",
            // IVv: "txwl888txwl20201",
            // str: `xstxwl.${local.get("t-k")}.${
            //                     local.get("Code").Id
            //             }.${local.get("Code").LoginCode}.txwl999`,
        };
    },
    mounted() {
        // 用户信息
        getUser().then((res) => {
            // console.log(res, "121212");
            if (res.Code == 200) {
                let Data = res.Data;
                this.geren = Data;
                let aaa = this.geren.BankCardInfo;
                console.log(aaa, "12");
                if (aaa != "") {
                    this.Bank = JSON.parse(aaa);
                    this.xin = this.Bank.splice(0, 1);
                } else {
                    this.$notify.info({                      
                        message: "暂无数据",
                    });
                }
            }
        });

        // 获取提现信息
        WithdrawalMessage().then((res) => {
            // console.log(res, "121212");
            // console.log(Data);
            if (res.Code == 200) {
                let Data = res.Data;
                this.txpzb = Data;
                console.log(this.txpzb, "111111111");
                if (Data.SfTx && Data.NumberTimes > 0) {
                    document.querySelector(
                        "button"
                    ).style.background = "#374ef2";
                    document.querySelector(
                        "button"
                    ).style.opacity = "1";
                } else {
                    document.querySelector(
                        "button"
                    ).style.background = "#ccc";
                    document.querySelector(
                        "button"
                    ).style.opacity = "0.5";
                }
            }
        });
    },
    created() {
        // this.getData();
        this.txpz();
        this.TxIncome = this.$route.query.TxIncome;
        console.log(this.TxIncome, "idssssssssssssss");
    },
    methods: {
        Tixje() {
            if (this.tx == "") {
                this.$notify({
                    message: "请输入金额",
                    type: "warning",
                    position: "top-left",
                    duration: 1500,
                });
                // document.querySelector(".tx-yz").style.display = "block";
            } else {
                this.flag = "true";
            }
        },
        zhifu() {
            if (this.zfmm == "") {
                this.$notify({
                    message: "请填写密码",
                    type: "warning",
                    position: "top-left",
                    duration: 1500,
                });
            }
        },
        ssr() {
            // this.$router.replace("/kabao");
            this.txpzb = local.get("t-x");
            // console.log(txpzb,'11111111');
            console.log(this.zfyz);
            console.log(this.flag);
            console.log(this.yhkyz);
            let data = {
                Phone: "",
                SMSCode: "",
                Money: this.tx,
                Type: 1,
                TxPwd: this.zfmm,
            }
            if (this.txpzb.SfTx || (this.txpzb.NumberTimes > 0 && this.zfyz == "true" && this.flag == "true" && this.yhkyz == "true")) {
                WorkOrderAddTx(data).then(res => {
                    console.log(res, '12121212');
                    if (res.Code == 200) {
                        let Data = res.Data;
                        document.querySelector(
                            ".motaii"
                        ).style.visibility = "visible";
                        document.querySelector(
                            ".maiinn"
                        ).innerHTML = Data;
                    }
                })
            }
        },
        // sspp() {
        // 	document.querySelector(".motai").style.visibility = "hidden";
        // },
        ssapp() {
            document.querySelector(".motaii").style.visibility =
                "hidden";
        },
        bangzhu() {
            document.querySelector(".motai").style.visibility =
                "visible";
        },
        immgg() {
            document.querySelector(".motaii").style.visibility =
                "hidden";
        },
        djqd() {
            document.querySelector(".motaii").style.visibility =
                "hidden";
        },
        txpz() {
            WithdrawalMessage().then(res => {
                if (res.Code == 200) {
                    let Data = res.Data
                    local.set("t-x", Data);
                }
            })
        },
    },
};
</script>

<style lang="less" scoped>
.tan {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #000000;
    opacity: 0.58;
    /* opacity: 01; */
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    /* line-height: 20px; */
    color: #ffffff;
    position: absolute;
    left: 36%;
    top: 25%;
    border-radius: 4px;
    display: none;
}

.kh {
    margin-left: 11%;
}

.txje {
    width: 100%;
    height: 4.9rem;
    background-color: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 0.7875rem;
    box-shadow: 0px 0px 6px rgba(229, 82, 42, 0.08);
}

.top {
    // width: 100%;
    height: 13rem;
    background: url(../assets/img/303.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 0.75rem;
    // box-sizing: border-box;
}

.top-name {
    font-size: 0.875rem;
    color: #fff;
}

.top-nav {
    width: 100%;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-text {
    font-size: 0.875rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 1.5rem;
    color: #ffffff;
    padding: 0.5375rem 0;
}

.motaii>div {
    padding: 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.motaii>div>div:first-child {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: flex-end;
}

.motaii>div>div:first-child>img {
    width: 1.5rem;
    height: 1.5rem;
}

.ctaa {
    font-size: 0.8rem;
    color: #ed0e08;
    display: none;
}

.Wd-span1 {
    // width: 12%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tianxie>p>span {
    visibility: hidden;
    color: #ed0e08;
    font-size: 0.8rem;
}

.khh {
    color: #333 !important;
    margin-left: 7%;
}

.zfmm-span {
    color: #ed0e08;
    font-size: 0.8rem;
    display: none;
}

input {
    border: 0px;
    outline: none;
    color: #333;
}

.main-buttom>div>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 57%;
}

.zf-mm {
    color: #b9b9b9;
    font-size: 0.8rem;
    text-align: center;
    display: flex;
    align-items: center;
}

.zf-mm>a {
    color: #b9b9b9;
}

.mainn>div {
    width: 100%;
    height: 7%;
    display: flex;
    justify-content: flex-end;
}

.mainn-box {
    height: 1.5rem;
    width: 1.5rem;
}

/deep/.el-input__inner::placeholder {
    color: #686767;
}

/* 谷歌 */
/deep/.el-input__inner::-webkit-input-placeholder {
    color: #686767;
}

/* 火狐 */
/deep/.el-input__inner:-moz-placeholder {
    color: #686767;
}

/*ie*/
/deep/.el-input__inner:-ms-input-placeholder {
    color: #686767;
}

/deep/.el-input__inner {
    width: 100%;
    height: 100%;
    border: 0px;
    outline: none;
    padding: 0px;
    color: #333;
}

/deep/.el-input {
    width: 55%;
    height: 66%;
}

.main-top>div {
    width: 100%;
    // height: 9rem;
    display: flex;
    flex-direction: column;
    // justify-content: space-evenly;
}

.mian-top-on {
    width: 100%;
    border-bottom: 0.0625rem solid #e5e5e5;
}

.pps {
    padding: 1.0625rem 0;
    border-bottom: 0.0625rem solid #e5e5e5;
}

.ssp {
    border-bottom: none;
}

.bot {
    width: 95%;
    padding: 0.3125rem 0.625rem;
    margin-top: 0.5rem;
    background: #ffffff;
    box-shadow: 0px 0px 6px rgba(229, 82, 42, 0.08);
}

.mi {
    padding: 0.875rem 0;
    border-bottom: 0.0625rem solid #e5e5e5;
}

.ma {
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // line-height: 20px;
    color: #b9b9b9;
    padding: 0.625rem 0;
    border-bottom: 0.0625rem solid #e5e5e5;
}

.pps>span {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // line-height: 24px;
    color: #333333;
}

.pp {
    padding: 1.0625rem 0;
}

.inputs {
    padding-left: 2.25rem;
}

.main-top>div>p {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 400;
    // height: 3rem;
}

.main-top input {
    border: 0px;
    outline: none;
    color: #333;
}

.tixian-box {
    height: 100%;
}

.tixian-img {
    height: 100%;
}

button {
    width: 95%;
    height: 2.812rem;
    background: #374ef2;
    border-radius: 25px;
    border: 0px;
    outline: none;
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    margin-top: 0.625rem;
}

.main-buttom>div>input {
    width: 100%;
    height: 35%;
    border: 0px;
    outline: none;
}

.main-buttom>div>p {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
}

.main-buttom>div {
    width: 100%;
    height: 3.75rem;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main-buttom>p {
    font-size: 0.8rem;
    font-weight: 400;
    color: #b9b9b9;
}

a {
    // text-decoration: none;
    color: #9f9f9f;
}

.main-top>p:first-child {
    font-size: 0.9rem;
    font-weight: 400;
    color: #333333;
}

.main-top>p:nth-child(2) {
    font-size: 0.9rem;
    font-weight: 400;
    color: #9f9f9f;
}

.main-top {
    margin-bottom: 0.625rem;
    width: 100%;
    padding: 1rem 1rem;
    box-shadow: 0rem 0rem 0.375rem rgba(229, 82, 42, 0.08);
    border-radius: 0.25 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    box-sizing: border-box;
}

.main {
    // padding: 0 0.625rem;
    box-sizing: border-box;
    margin-bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    margin-top: 15px;
}

.txje>p:first-child {
    font-size: 0.9rem;
    font-weight: 400;
    color: #333333;
    margin-bottom: 1.125rem;
}

.txje>p:nth-child(2) {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1rem;
}

.txje>p:nth-child(2)>img {
    margin-right: 3%;
}

.tx {
    border: 0px;
    outline: none; //取消默认选中的样式
    // width: 35%;
}

.top>p:nth-child(3) {
    font-size: 0.8rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 1rem;
}

.top>p:nth-child(2) {
    font-size: 0.9rem;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.top>p:nth-child(2)>span:nth-child(2) {
    font-size: 0.9rem;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    width: 40%;
}

.top>p:nth-child(2)>span:first-child {
    font-size: 1.8rem;
    margin-left: 3%;
    margin-right: 3%;
}

.top>p:nth-child(2)>span:nth-child(2)>span {
    font-size: 1.8rem;
    margin-left: 3%;
}

.top>div:first-child {
    width: 100%;
    height: 1.125rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top>div:first-child>img {
    height: 0.9375rem;
    width: 0.9375rem;
}

.tixian {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.motai>div {
    width: 90%;
    background-color: #fff;
    border-radius: 5px;
    height: 20%;
}

.motaii>div {
    width: 90%;
    background-color: #fff;
    border-radius: 5px;
    height: 20%;
}

.motai>div>div {
    width: 100%;
    // height: %;
    padding: 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.motai>div>div>button {
    width: 22%;
    height: 100%;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.motai,
.motaii {
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.7);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    visibility: hidden;
    // visibility: visible;
    justify-content: center;
    align-items: center;
}

.yanz {
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    padding-left: 4%;
    box-sizing: border-box;
    width: 100%;
    height: 25%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid rgba(204, 204, 204, 0.6);
    font-size: 0.9rem;
    color: #333;
}
</style>
